<script>
import {defineComponent} from 'vue'
import instance from "@/api/axios";

export default defineComponent({
    name: "HeaderView",
    created() {
        instance.post('https://wkt.myhope365.com//weChat/applet/subject/list', {
            enable: '1',
        }, {
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(res => {

            this.course = res.rows;
        })
    },
    data() {
        return {
            course: '',
            formInline: {
                user: '',
                password: '',
            },
            visible: false,
            confirmLoading: false,
        }
    },

    methods: {
        onSearch(value) {
            console.log(value);
        },
        showModal() {
            this.visible = true;
        },
        handleOk() {
            this.ModalText = 'The modal will be closed after two seconds';
            this.confirmLoading = true;
            setTimeout(() => {
                this.visible = false;
                this.confirmLoading = false;
            }, 2000);
        },
        handleCancel() {
            this.visible = false;
        },
        callback(key) {
            console.log(key);
        },
        handleSubmit() {

        },
    },

})
</script>

<template>
    <div>
        <div class="box">
            <div class="main">
                <div class="top">
                    <img src="https://course.myhope365.com/img/logo-text.321d0dc2.png" style="width: 212px;height: 68px">
                </div>
                <div class="bottom">
                    <ul class="hdul">
                        <li><a href="###">首页</a></li>
                        <li class="fenlei">
                            <a-dropdown>
                                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                                    课程分类
                                    <a-icon type="down"/>
                                </a>
                                <a-menu slot="overlay" class="show">
                                    <a-menu-item v-for="item in course" :key="item.subjectId">
                                        <a href="###">{{ item.title }}</a>
                                    </a-menu-item>
                                </a-menu>
                            </a-dropdown>
                        </li>
                        <li><a href="###">教学管理云平台</a></li>
                    </ul>
                    <div class="serach">
                        <a-input-search placeholder="搜索课程~" enter-button @search="onSearch"/>
                    </div>
                    <div class="right">
                        <!-- 购物车 -->
                        <div class="che"></div>
                        <!-- 登录按钮 -->

                        <div>
                            <a-button type="primary" @click="showModal" class="login">
                                <p>登录/注册</p>
                            </a-button>
                            <a-modal
                                    :footer="null"
                                    :visible="visible"
                                    @ok="handleOk"
                                    @cancel="handleCancel"

                            >
                                <div>
                                    <a-tabs default-active-key="1" @change="callback" >
                                        <a-tab-pane key="1" tab="账号登陆" >
                                            <a-form-model layout="inline" :model="formInline" @submit="handleSubmit" @submit.native.prevent>
                                                <a-form-model-item>
                                                    <a-input v-model="formInline.user" placeholder="请输入账户名">
                                                        <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                                                    </a-input>
                                                </a-form-model-item>
                                                <div style="height: 25px"></div>
                                                <a-form-model-item>
                                                    <a-input v-model="formInline.password" type="password" placeholder="请输入密码">
                                                        <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                                                    </a-input>
                                                </a-form-model-item>
                                                <div style="height: 20px"></div>
                                                <a-form-model-item>
                                                    <a-button
                                                        style="width: 280px;margin-left: 5px;"
                                                        type="primary"
                                                        html-type="submit"
                                                        :disabled="formInline.user === '' || formInline.password === ''"
                                                    >
                                                        登录
                                                    </a-button>
                                                </a-form-model-item>
                                            </a-form-model>
                                        </a-tab-pane>
                                        <a-tab-pane key="2" tab="手机登录" force-render >
                                            Content of Tab Pane 2
                                        </a-tab-pane>
                                    </a-tabs>
                                </div>
                            </a-modal>

                        </div>
                    </div>
                </div>
                <a class="vip" href="###">
                    开通vip免费观看全站视频
                </a>
            </div>
        </div>
    </div>
</template>
<style scoped lang="less">
ul {
  list-style: none;


}

a {
  text-decoration: none;
}

.hdul {
  margin-top: 20px;
  overflow: hidden;
  margin-left: 20px;
  float: left;
}

.hdul > li {
  float: left;
  padding: 10px;
}

.v {
  font-size: 12px;
  font-weight: 400;
}

.hdul > li > a {
  color: white !important;
  font-size: 16px;
  font-weight: 700;
}

.box {
  width: 100%;
  height: 295px;
  background-image: url("https://course.myhope365.com/img/index-top-bg.564836d0.png");
  background-size: 100% 100%;

  > .main {
    width: 80%;
    margin: 0 auto;

    > .top {
      text-align: center;

      > img {
        margin: 50px 0 50px;
      }
    }

    > .bottom {

      overflow: hidden;
    }
  }
}

.show {
  position: absolute;

}

.serach {
  margin-top: 25px;
  width: 300px;
  overflow: hidden;
  margin-left: 740px;
  border-radius: 19px;
  border: 1px solid #EDF1F7;

}

/deep/ .ant-input {
  height: 38px;
}

/deep/ .ant-btn {
  height: 38px;
  font-size: 25px;

}

.right {

  width: 170px;
  height: 36px;
  float: right;
  margin-top: -37px;
  overflow: hidden;

}

.che {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-image: url();
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 50%;
  float: left;
  margin-left: 20px;
  cursor: pointer;
}

.login {
  float: right;
  width: 94px;
  height: 30px;
  border-radius: 50px;
  background-color: #fff;
  line-height: 30px;
  color: #35C7DE;
  font-weight: 900;
  margin-top: 2px;
  font-size: 16px;
  text-align: center;

  > p {

    width: 100%;
    margin-left: -3px;
  }


}

.vip {
  display: block;
  position: absolute;
  width: 155px;
  height: 41px;
  background-image: url();
  background-repeat: no-repeat;
  background-position: 50%;
  font-size: 12px;
  color: white !important;
  text-align: center;
  line-height: 25px;
  right: 125px;
  top: 140px;
}
/deep/.ant-modal-content{

    width: 360px;
    height: 310px;
    position: relative;
}
/deep/.ant-tabs{
  position: absolute;
    width: 288px;
    height: 264px;
    right: 30px;
}
/deep/.ant-tabs-nav-container{
    text-align: center;
}
/deep/.ant-input-affix-wrapper .ant-input:not(:first-child){
    width: 280px;
    padding-left:30px;
    margin-left: 5px;

}
/deep/.ant-btn ant-btn-primary{
    width: 360px;
}
</style>